<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	template="/templates/crud-template.xhtml">

	<ui:define name="content">
	<div align="center">
		<p:growl id="msgs" showDetail="true" sticky="false" life="10000"/>
<h:form id="form" style="width: 800px;"> 
    <p:dataTable id="listaEmpleados" var="empleado" value="#{empleadoBean.empleados}" 
    emptyMessage="No hay empleados a listar" widgetVar="empleadosTable"
    paginator="true" rows="5"  
    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
    rowsPerPageTemplate="5,10,15">  
  		<f:facet name="header">  
  		<div align="right">
            <p:outputPanel>  
                <h:outputText value="Busqueda:" />
                <p:inputText id="globalFilter" onkeyup="empleadosTable.filter()" style="width:150px" />  
            </p:outputPanel>  
        </div>
        </f:facet>
  		 
  		<p:column headerText="Codigo">  
            <h:outputText value="#{empleado.strCodigoPersona}" />  
        </p:column>
        
        <p:column headerText="Nombres">  
            <h:outputText value="#{empleado.strNombre}" />  
        </p:column>  
  
        <p:column headerText="Apellido Paterno" filterBy="#{empleado.strApellidoPaterno}" filterStyle="display:none">   
            <h:outputText value="#{empleado.strApellidoPaterno}"/>  
        </p:column> 
        
        <p:column headerText="Apellido Materno">  
            <h:outputText value="#{empleado.strApellidoMaterno}" />  
        </p:column>  
        
        <p:column headerText="Perfil">  
            <h:outputText value="#{empleado.perfil.strNombre}" />  
        </p:column> 

        <p:column style="width:100px">  
             <h:panelGrid columns="2" styleClass="actions" cellpadding="2">  
                 <p:commandButton update="dlgForm:display" oncomplete="carDialog.show()" image="ui-icon ui-icon-search" title="Vea el Detalle de los datos del empleado">  
                     <f:setPropertyActionListener value="#{empleado}" target="#{empleadoBean.selectedEmpleado}" />  
                     <f:setPropertyActionListener value="#{false}" target="#{empleadoBean.editMode}" />  
                 </p:commandButton>  
                 <p:commandButton update="dlgForm:display" oncomplete="carDialog.show()" image="ui-icon ui-icon-pencil" title="Editar los datos del empleado" >  
                     <f:setPropertyActionListener value="#{empleado}" target="#{empleadoBean.selectedEmpleado}" />  
                     <f:setPropertyActionListener value="#{true}" target="#{empleadoBean.editMode}" />  
                 </p:commandButton>  
             </h:panelGrid>  
        </p:column>
         
         <f:facet name="footer">  
         <div align="left">
         <p:commandButton value="Nuevo Empleado" update="dlgForm2:display2" oncomplete="carDialog2.show()"  image="ui-icon ui-icon-person" title="Agregue un empleado al sistema">  
				<f:setPropertyActionListener value="#{true}" target="#{empleadoBean.editMode}" />  
 		 </p:commandButton>
         </div>
        </f:facet> 
        
    </p:dataTable>  
</h:form> 
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  
    <p:dialog modal="true" widgetVar="statusDialog" header="Status"   
        draggable="false" closable="false" resizable="false">  
    	<p:graphicImage value="/resources/images/ajaxloadingbar.gif" />  
    </p:dialog>               
<p:dialog header="Detalle Empleado" widgetVar="carDialog" resizable="false" id="carDlg"  
                showEffect="fade" hideEffect="explode" modal="true" width="400" position="center">  
<h:form id="dlgForm">  
          <h:panelGrid id="display" columns="2" cellpadding="2" style="margin:0 auto;" >  
  
            <h:outputText value="Codigo Empleado" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strCodigoPersona}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strCodigoPersona}" style="font-weight:bold" rendered="#{empleadoBean.editMode}"/>  
            </h:panelGroup>   
  
  			<h:outputText value="Nombres" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strNombre}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <p:inputText value="#{empleadoBean.selectedEmpleado.strNombre}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" required="true" label="Nombre" onkeypress="return validar(event)"/>  
            </h:panelGroup>  
            
            <h:outputText value="Apellido Paterno" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strApellidoPaterno}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <p:inputText value="#{empleadoBean.selectedEmpleado.strApellidoPaterno}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" required="true" label="Apellido Paterno" onkeypress="return validar(event)"/>  
            </h:panelGroup>  
            
            <h:outputText value="Apellido Materno" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strApellidoMaterno}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <p:inputText value="#{empleadoBean.selectedEmpleado.strApellidoMaterno}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" required="true" label="Apellido Materno" onkeypress="return validar(event)"/>  
            </h:panelGroup>
            
            <h:outputText value="DNI" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.intDNI}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <p:inputMask value="#{empleadoBean.selectedEmpleado.intDNI}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" required="true" mask="99999999" label="DNI"/>  
            </h:panelGroup> 
            
            <h:outputText value="Distrito" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.distritos.strNombreDistrito}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <h:selectOneMenu value="#{empleadoBean.selectedEmpleado.distritos.intIdDistrito}" style="font-weight:bold" rendered="#{empleadoBean.editMode}"  required="true"  >  
		            <f:selectItems itemLabel="Seleccione Distrito" itemValue="#{null}"/>
		            <f:selectItems value="#{empleadoBean.distritos}" var="distrito" 
		                          itemLabel="#{distrito.strNombreDistrito}" itemValue="#{distrito.intIdDistrito}" />  	        
		        </h:selectOneMenu>   
            </h:panelGroup>  
            
            <h:outputText value="Dirección" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strDireccion}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <p:inputText value="#{empleadoBean.selectedEmpleado.strDireccion}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" required="true" label="Dirección"/>  
            </h:panelGroup> 
            
            <h:outputText value="Email" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strMail}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <p:inputText value="#{empleadoBean.selectedEmpleado.strMail}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" required="true" label="Email" validator="#{validators.validateEmail}"/>  
            </h:panelGroup> 
            
            <h:outputText value="Teléfono" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strTelefono}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <p:inputMask value="#{empleadoBean.selectedEmpleado.strTelefono}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" mask="999-9999" required="true" label="Telefono"/>  
            </h:panelGroup> 
            
            <h:outputText value="Celular" />  
            <h:panelGroup>  
                <h:outputText value="#{empleadoBean.selectedEmpleado.strCelular}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <p:inputText value="#{empleadoBean.selectedEmpleado.strCelular}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" mask="999999999" required="true" label="Celular"/>  
            </h:panelGroup> 
            
            <h:outputText value="Sexo" />  
            <h:panelGroup> 
            <c:if test="#{empleadoBean.selectedEmpleado.strSexo==1}">
	  		  <h:outputText value="Masculino" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
	  	    </c:if> 
	  	    <c:if test="#{empleadoBean.selectedEmpleado.strSexo==0}">
	  		  <h:outputText value="Femenino" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
	  	    </c:if> 
	  	     <h:selectOneMenu value="#{empleadoBean.selectedEmpleado.strSexo}" style="font-weight:bold" rendered="#{empleadoBean.editMode}"  required="true"  label="Sexo">  
		            <f:selectItem itemLabel="Seleccione Sexo" itemValue="#{null}"/>
		            <f:selectItem itemLabel="Femenino" itemValue="0" />  
		            <f:selectItem itemLabel="Masculino" itemValue="1" />          
		     </h:selectOneMenu>  
            </h:panelGroup> 
            <!-- 
            <h:outputText value="Perfiles" />  
            <h:panelGroup>
                <h:outputText value="#{empleadoBean.selectedEmpleado.perfil.strNombre}" style="font-weight:bold" rendered="#{!empleadoBean.editMode}"/>  
                <h:selectOneMenu value="#{empleadoBean.selectedEmpleado.perfil.strCodigoPerfil}" style="font-weight:bold" rendered="#{empleadoBean.editMode}" required="true" requiredMessage="Seleccione un Perfil" >
                    <f:selectItem itemLabel="Seleccione Perfil" itemValue="#{null}"/>  
		            <f:selectItems value="#{empleadoBean.perfiles}" var="perfil" 
		                          itemLabel="#{perfil.strNombre}" itemValue="#{perfil.strCodigoPerfil}" ></f:selectItems>  	        
		        </h:selectOneMenu>  
            </h:panelGroup>
			 -->
          <f:facet name="footer"> 
                <p:outputPanel rendered="#{empleadoBean.editMode}" layout="block" style="text-align:center">
                <h:panelGroup>
					  <p:commandButton value="Grabar" 
					  actionListener="#{empleadoBean.actualizaEmpleado}"  
					  update="form:listaEmpleados msgs" 
                      image="ui-icon ui-icon-check"
                      oncomplete="onEditComplete(args)"/>
                    <p:commandButton value="Cancelar" onclick="carDialog.hide()" type="button" image="ui-icon ui-icon-close"/>
  				</h:panelGroup>
              </p:outputPanel>  
          </f:facet>  
        </h:panelGrid> 
       </h:form>
       
    </p:dialog>  
    
    <p:dialog header="Nuevo Empleado" widgetVar="carDialog2" resizable="false" id="carDlg2"
    		showEffect="fade" hideEffect="explode" modal="true" width="400" position="center" 
    		onShow="limpiarTextBox('#dlgForm2')"> 
    
    <h:form id="dlgForm2">
    	<h:panelGrid id="display2" columns="2" cellpadding="2" style="margin:0 auto;">    		
    		<h:outputText value="Nombres"/>
    		<h:panelGroup>
    			<p:inputText value="#{empleadoBean.nuevoEmpleado.strNombre}" style="font-weight:bold" required="true" label="Nombres" onkeypress="return validar(event)"/>
    		</h:panelGroup>
    		
    		<h:outputText value="Apellido Paterno" />  
            <h:panelGroup>  
                <p:inputText value="#{empleadoBean.nuevoEmpleado.strApellidoPaterno}" style="font-weight:bold" required="true" label="Apellido Paterno" onkeypress="return validar(event)"/>  
            </h:panelGroup>  
            
            <h:outputText value="Apellido Materno" />  
            <h:panelGroup>  
                <p:inputText value="#{empleadoBean.nuevoEmpleado.strApellidoMaterno}" style="font-weight:bold" required="true" label="Apellido Materno" onkeypress="return validar(event)"/>  
            </h:panelGroup>
    		
    		<h:outputText value="DNI" />  
            <h:panelGroup>  
                <p:inputMask value="#{empleadoBean.nuevoEmpleado.intDNI}"  style="font-weight:bold" required="true" mask="99999999" label="DNI"/>  
            </h:panelGroup> 
            
            <h:outputText value="Distrito" />  
            <h:panelGroup>  
                <h:selectOneMenu value="#{empleadoBean.nuevoEmpleado.distritos.intIdDistrito}" style="font-weight:bold" required="true" requiredMessage="Seleccion un Distrito" >  
		            <f:selectItem itemLabel="Seleccione Distrito" itemValue="#{null}"/>
		            <f:selectItems value="#{empleadoBean.distritos}" var="distrito" 
		                          itemLabel="#{distrito.strNombreDistrito}" itemValue="#{distrito.intIdDistrito}" />  	        
		        </h:selectOneMenu>   
            </h:panelGroup>
            
            <h:outputText value="Dirección" />  
            <h:panelGroup>  
                <p:inputText value="#{empleadoBean.nuevoEmpleado.strDireccion}" style="font-weight:bold" required="true" label="Dirección"/>  
            </h:panelGroup> 
            
            <h:outputText value="Email" />  
            <h:panelGroup>  
                <p:inputText value="#{empleadoBean.nuevoEmpleado.strMail}" style="font-weight:bold" required="true" validator="#{validators.validateEmail}" label="Email" />  
            </h:panelGroup> 
            
            <h:outputText value="Teléfono" />  
            <h:panelGroup>  
                <p:inputMask value="#{empleadoBean.nuevoEmpleado.strTelefono}" style="font-weight:bold" required="true" mask="999-9999" label="Telefono"/>  
            </h:panelGroup> 
            
            <h:outputText value="Celular" />  
            <h:panelGroup>  
                <p:inputMask value="#{empleadoBean.nuevoEmpleado.strCelular}" style="font-weight:bold" required="true" mask="999999999" label="Celular" />  
            </h:panelGroup> 
            
            <h:outputText value="Sexo" />  
            <h:panelGroup> 
	  	     <h:selectOneMenu value="#{empleadoBean.nuevoEmpleado.strSexo}" style="font-weight:bold"  required="true"  label="Sexo">  
		            <f:selectItem itemLabel="Seleccione Sexo" itemValue="#{null}"/>
		            <f:selectItem itemLabel="Femenino" itemValue="0" />  
		            <f:selectItem itemLabel="Masculino" itemValue="1" />          
		     </h:selectOneMenu>  
            </h:panelGroup> 
    		
    		<h:outputText value="Perfiles" />  
            <h:panelGroup>
                <h:selectOneMenu value="#{empleadoBean.nuevoEmpleado.perfil.strCodigoPerfil}" style="font-weight:bold" required="true" requiredMessage="Seleccione un Perfil" >
                    <f:selectItem itemLabel="Seleccione Perfil" itemValue="#{null}"/>  
		            <f:selectItems value="#{empleadoBean.perfiles}" var="perfil" 
		                          itemLabel="#{perfil.strNombre}" itemValue="#{perfil.strCodigoPerfil}" ></f:selectItems>  	        
		        </h:selectOneMenu>  
            </h:panelGroup>
    		
    		 <f:facet name="footer"> 
    		 <p:outputPanel layout="block" style="text-align:center">
    		<h:panelGroup>
    			<p:commandButton value="Grabar"
    			                 actionListener="#{empleadoBean.registraEmpleado}"
    			                 update="form:listaEmpleados msgs"
    			                 image="ui-icon ui-icon-check"
    			                 oncomplete="onEditCompleteRegistrar(args)"/>
    			<p:commandButton value="Cancelar" onclick="carDialog2.hide()" type="button" image="ui-icon ui-icon-close"/>
    		</h:panelGroup>
    		</p:outputPanel>
    		</f:facet>
    	</h:panelGrid>
    </h:form>
    </p:dialog>
	</div>
</ui:define>

</ui:composition>